<template>
  <div class="pagination">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="page.currentPage" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalLength">
    </el-pagination></div>

</template>

<script>
import { ref, reactive } from "vue";

export default {
  name: "pagination",
  props: {
    page: {
      type: Object,
      required: true,
      default() {
        return {};
      },
    },
  },
  watch: {
    props(val) {
      console.log(val);
    },
  },
  setup(props, getPageData) {
    console.log(props, "props");
    // let currentPage = props.page.currentPage;
    // let pageSize = props.page.pageSize;
    // let pageNumber = props.page.pageNumber;
    // let totalLength = props.page.totalLength;
    let page = props.page;
    const handleSizeChange = (val) => {
      console.log(`每页 ${val} 条`);
      page.pageSize = val;
      getPageData.emit("getPageData", { page });
    };
    const handleCurrentChange = (val) => {
      console.log(`当前页: ${val}`);
      page.currentPage = val;
      page.pageNumber = val;
      getPageData.emit("getPageData", { page });
    };
    return {
      //   currentPage,
      //   pageSize,
      //   totalLength,
      page,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped>
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>